import React from 'react';
import './style.less';
import cx from 'classnames';

const rang = times => {
    return 's'.repeat(times).split('');
};

const Loading = ({ size = 'default', tip = '', color = '#ffeb3b' }) => {
    const height = {
        small: '4px',
        default: '7px',
        large: '10px'
    };
    const width = {
        small: '2px',
        default: '2px',
        large: '3px'
    };
    const tans = {
        small: '1px 8px',
        default: '1px 12px',
        large: '2px 16px'
    };
    const style = {
        backgroundColor: color,
        height: height[size],
        width: width[size],
        transformOrigin: ` ${tans[size]}`
    };
    return (
        <div className="loading-box">
            <div>
                <div className="message-status message-loading">
                    {rang(10).map((i, index) => (
                        <div style={style} key={index} className="line" />
                    ))}
                    <div className="message-tip" style={{ color: color }}>
                        {tip}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Loading;
